<template>
  <div style="width:100%;height:100%;">
    <el-table
      ref="tableData"
      :data="tableList"
      class="table_content"
      height="calc(100% - 30px)"
      border
      :row-class-name="tableRowClassName"
      :span-method="objectSpanMethod"
      :header-cell-style="headerColor"
      style="width: 1200px"
    >
      <el-table-column
        label="指标名称"
        width="97"
        prop="industry"
        :show-overflow-tooltip="true"
        align="center"
      >
        <!-- //产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉） -->
        <template slot-scope="scope">
          <div
            :style="
              'height:' +
                scope.row.industrycount * 40 +
                'px;line-height:' +
                scope.row.industrycount * 40 +
                'px'
            "
            :class="
              scope.row.industrynumber % 2 === 0
                ? 'blue text_ellipsis'
                : 'white text_ellipsis'
            "
          >
            {{ scope.row.industry }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="custname"
        label="评分标准"
        :show-overflow-tooltip="true"
        width="360"
      >
        <!-- //评分标准同指标使用插槽原因一样 -->
        <template slot-scope="scope">
          <div
            :style="
              'height:' +
                scope.row.custnamecount * 40 +
                'px;line-height:' +
                scope.row.custnamecount * 40 +
                'px'
            "
            :class="
              scope.row.custnamenumber % 2 === 0
                ? 'white text_ellipsis'
                : 'blue text_ellipsis'
            "
          >
            {{ scope.row.custname }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        :show-overflow-tooltip="true"
        prop="draftTypeName"
        align="center"
        label="评价内容"
      />
      <el-table-column
        prop="lastBal"
        width="140"
        align="center"
        :show-overflow-tooltip="true"
        label="上月余额"
      />
      <el-table-column
        prop="curIncreased"
        width="140"
        align="right"
        :show-overflow-tooltip="true"
        label="本月新增"
      />
      <el-table-column label="本月减少" align="center">
        <el-table-column
          width="150"
          :show-overflow-tooltip="true"
          align="right"
          prop="saEndorseLessen"
          label="质押"
        />
        <el-table-column
          width="150"
          :show-overflow-tooltip="true"
          align="right"
          prop="collectionLessen"
          label="到期托收"
        />
        <el-table-column
          width="150"
          :show-overflow-tooltip="true"
          align="right"
          prop="endorseLessen"
          label="背书"
        />
        <el-table-column
          width="150"
          :show-overflow-tooltip="true"
          align="right"
          prop="discountLessen"
          label="贴现"
        />
        <el-table-column
          width="150"
          :show-overflow-tooltip="true"
          align="right"
          prop="curLessen"
          label="合计"
        />
      </el-table-column>
      <el-table-column
        width="174"
        :show-overflow-tooltip="true"
        align="right"
        prop="curBal"
        label="本月余额"
      />
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableList: [],
      tabledata: [
        {
          "rowNum": null,
          "industry": "主体信息",
          "custCode": "001421",
          "custname": "每缺填一项-3分",
          "custnametwo": "-3分",
          "draftType": "1",
          "draftTypeName": "主体名称",
          "lastBal": "0.00",
          "curIncreased": "5,200,000.00",
          "saEndorseLessen": "0.00",
          "collectionLessen": "0.00",
          "endorseLessen": "5,200,000.00",
          "discountLessen": "0.00",
          "curLessen": "5,200,000.00",
          "curBal": "0.00"
        },
        {
          "rowNum": null,
          "industry": "主体信息",
          "custCode": "001421",
          "custname": "每缺填一项-3分",
          "custnametwo": "-3分",
          "draftType": "4",
          "draftTypeName": "统一社会信用代码",
          "lastBal": "0.00",
          "curIncreased": "5,200,000.00",
          "saEndorseLessen": "0.00",
          "collectionLessen": "0.00",
          "endorseLessen": "5,200,000.00",
          "discountLessen": "0.00",
          "curLessen": "5,200,000.00",
          "curBal": "0.00"
        },
        {
          "rowNum": null,
          "industry": "主体信息",
          "custCode": "001560",
          "custname": "产品种类信息不齐全-3分",
          "draftType": "1",
          "draftTypeName": "银票-电票",
          "lastBal": "0.00",
          "curIncreased": "4,053,269.00",
          "saEndorseLessen": "0.00",
          "collectionLessen": "5,926,320.41",
          "endorseLessen": "1,586,395.00",
          "discountLessen": "0.00",
          "curLessen": "7,512,715.41",
          "curBal": "5,849,311.00"
        },
        {
          "rowNum": null,
          "industry": "主体信息",
          "custCode": "001560",
          "custname": "产品种养规模信息不齐全",
          "draftType": "4",
          "draftTypeName": "合计",
          "lastBal": "0.00",
          "curIncreased": "4,053,269.00",
          "saEndorseLessen": "0.00",
          "collectionLessen": "5,926,320.41",
          "endorseLessen": "1,586,395.00",
          "discountLessen": "0.00",
          "curLessen": "7,512,715.41",
          "curBal": "5,849,311.00"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001353",
          "custname": "家用电器有限公司",
          "draftType": "1",
          "draftTypeName": "银票-电票",
          "lastBal": "0.00",
          "curIncreased": "45,964,536.65",
          "saEndorseLessen": "0.00",
          "collectionLessen": "0.00",
          "endorseLessen": "169,679,484.78",
          "discountLessen": "0.00",
          "curLessen": "169,679,484.78",
          "curBal": "42,964,536.65"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001353",
          "custname": "家用电器有限公司",
          "draftType": "3",
          "draftTypeName": "商票-T票通",
          "lastBal": "0.00",
          "curIncreased": "13,073,200.00",
          "saEndorseLessen": "0.00",
          "collectionLessen": "3,650,400.00",
          "endorseLessen": "0.00",
          "discountLessen": "0.00",
          "curLessen": "3,650,400.00",
          "curBal": "49,875,680.00"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001353",
          "custname": "家用电器有限公司",
          "draftType": "4",
          "draftTypeName": "合计",
          "lastBal": "0.00",
          "curIncreased": "59,037,736.65",
          "saEndorseLessen": "0.00",
          "collectionLessen": "3,650,400.00",
          "endorseLessen": "169,679,484.78",
          "discountLessen": "0.00",
          "curLessen": "173,329,884.78",
          "curBal": "92,840,216.65"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001354",
          "custname": "家用电器（合肥）有限公司",
          "draftType": "1",
          "draftTypeName": "银票-电票",
          "lastBal": "0.00",
          "curIncreased": "180,141,055.87",
          "saEndorseLessen": "0.00",
          "collectionLessen": "115,337.61",
          "endorseLessen": "16,001,969.83",
          "discountLessen": "113,258,142.22",
          "curLessen": "129,375,449.66",
          "curBal": "81,004,027.13"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001354",
          "custname": "家用电器（合肥）有限公司",
          "draftType": "2",
          "draftTypeName": "商票-外部商票",
          "lastBal": "0.00",
          "curIncreased": "0.00",
          "saEndorseLessen": "0.00",
          "collectionLessen": "0.00",
          "endorseLessen": "0.00",
          "discountLessen": "0.00",
          "curLessen": "0.00",
          "curBal": "602,728.00"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001354",
          "custname": "家用电器（合肥）有限公司",
          "draftType": "3",
          "draftTypeName": "商票-T票通",
          "lastBal": "0.00",
          "curIncreased": "20,271,290.98",
          "saEndorseLessen": "0.00",
          "collectionLessen": "15,453,326.83",
          "endorseLessen": "1,364,560.00",
          "discountLessen": "0.00",
          "curLessen": "16,817,886.83",
          "curBal": "113,413,717.06"
        },
        {
          "rowNum": null,
          "industry": "白电",
          "custCode": "001354",
          "custname": "家用电器（合肥）有限公司",
          "draftType": "4",
          "draftTypeName": "合计",
          "lastBal": "0.00",
          "curIncreased": "200,412,346.85",
          "saEndorseLessen": "0.00",
          "collectionLessen": "15,568,664.44",
          "endorseLessen": "17,366,529.83",
          "discountLessen": "113,258,142.22",
          "curLessen": "146,193,336.49",
          "curBal": "195,020,472.19"
        }
      ]
    }
  },
  created() {
    this.tableList = this.listHandle(this.tabledata)
  },
  methods: {
    // 合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 找到第一列
      if (columnIndex === 0) {
        // industrycount是需要合并的字段（这里第一列合并的字段是industrycount，industrycount是经过this.$listHandle处理过的数据，是主体信息的合并的个数）
        // 如果合并的个数大于1的话
        if (row.industrycount > 1) {
          return {
            rowspan: row.industrycount,
            colspan: 1
          };
        } else if (row.industrycount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第二列与第一列同理
      if (columnIndex === 1) {
        if (row.custnamecount > 1) {
          return {
            rowspan: row.custnamecount,
            colspan: 1
          };
        } else if (row.custnamecount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 表格头部颜色
    headerColor({ rowIndex, columnIndex }) {
      return this.headerColormetod(rowIndex);
    },
    // 改变合计那一行的背景色
    tableRowClassName({ row, rowIndex }) {
      if (row.draftTypeName === "合计") {
        return "hang";
      }
      return this.tableRowClassNamemethodes(rowIndex);
    },
    // 转化下请求回来的数据
    listHandle(list) {
      for (var key in list[0]) {
        var k = 0;
        var j = 0;
        while (k < list.length) {
          list[k][key + "count"] = 1;
          list[k][key + 'number'] = j;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][key] === list[i][key] && list[k][key] !== "") {
              list[k][key + "count"]++;
              list[i][key + "count"] = 0;
              list[i][key + 'number'] = j;
            } else {
              break;
            }
          }
          j++
          k = i;
        }
      }
      return list;
    },
    headerColormetod(rowIndex) {
      if (rowIndex === 0) {
        return { background: "#006e91", color: "#fff" };
      } else {
        return { background: "#bd1a1a", color: "#fff" };
      }
    },
    // 斑马条纹（bg和bgnone为类名，可以在类名写样式）
    tableRowClassNamemethodes(rowIndex) {
      if (rowIndex % 2 === 0) {
        return "bg";
      } else {
        return "bgnone";
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-table .hang {
  background: #970b84;
  font-weight: bold;
}
.blue {
  background: #0cc415;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
.white {
  background: #bd1a1a;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;

}
// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
::v-deep .el-table__body tr.current-row > td {
  background-color: #15a0ca00 !important;
}
</style>
